<template>
  <div>
    <el-dialog :visible.sync="dialogShow" width="990px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div slot="title" class="flex align-center">
        <span class="font-size-18 font-weight-700 padding-right-5 color-333333">{{ title }}</span>
        <span class="color-333333">单位：万元</span>
      </div>
      <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="primaryKey" border default-expand-all :tree-props="{ children: 'itemDtos', hasChildren: 'hasChildren' }">
        <el-table-column prop="chargeItemName" label="" width="150"></el-table-column>
        <el-table-column prop="name" label="累计执行" width="90">
          <template slot-scope="scope">
            <span>{{ scope.row.totalExecuteAmount | moneyFilterNoUnit }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="累计计划" width="90">
          <template slot-scope="scope">
            <span>{{ scope.row.totalPlanAmount | moneyFilterNoUnit }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="差异值">
          <template slot-scope="scope">
            <span>{{ scope.row.totalDifferenceAmount | moneyFilterNoUnit }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="差异率">
          <template slot-scope="scope">
            <span v-if="scope.row.bizType == 1" :class="scope.row.totalDifferenceRate > 0 ? 'color-green' : 'color-red'">{{ scope.row.totalDifferenceRate >= 0 ? '↑' : '↓' }}{{ Math.abs(scope.row.totalDifferenceRate) | accMul }}%</span>
            <span v-if="scope.row.bizType == 2" :class="scope.row.totalDifferenceRate < 0 ? 'color-green' : 'color-red'">{{ scope.row.totalDifferenceRate >= 0 ? '↑' : '↓' }}{{ Math.abs(scope.row.totalDifferenceRate) | accMul }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="预测全年执行" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.forecastExecuteAmount | moneyFilterNoUnit }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="年度计划" width="90">
          <template slot-scope="scope">
            <span>{{ scope.row.yearPlanAmount | moneyFilterNoUnit }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="差异值">
          <template slot-scope="scope">
            <span>{{ scope.row.planDifferenceAmount | moneyFilterNoUnit }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="差异率">
          <template slot-scope="scope">
            <span v-if="scope.row.bizType == 1" :class="scope.row.planDifferenceRate > 0 ? 'color-green' : 'color-red'">{{ scope.row.planDifferenceRate >= 0 ? '↑' : '↓' }}{{ Math.abs(scope.row.planDifferenceRate) | accMul }}%</span>
            <span v-if="scope.row.bizType == 2" :class="scope.row.planDifferenceRate < 0 ? 'color-green' : 'color-red'">{{ scope.row.planDifferenceRate >= 0 ? '↑' : '↓' }}{{ Math.abs(scope.row.planDifferenceRate) | accMul }}%</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
  import { apiPlanExecuteFlowSummary } from '@a/about';
  export default {
    props: {
      //是否收入相关
      hasIncome: {
        type: Boolean,
        default: false,
      },
      //是否支出相关
      hasPay: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: '',
      },
    },

    data() {
      return {
        dialogShow: false,
        tableData: [],
      };
    },

    methods: {
      async init() {
        this.dialogShow = true;
        let res = await apiPlanExecuteFlowSummary({
          projectKeys: this.$route.query.projectKey ? [this.$route.query.projectKey] : null,
          planYear: this.$route.query.year,
          planMonth: this.$route.query.month,
          ifCashIncome:this.hasIncome,
          ifCashExpend:this.hasPay,
        })
        this.tableData = res.itemDtos
      },
    },
  };
</script>
<style lang="scss" scoped>
  ::v-deep .el-dialog {
    max-width: 90%;
  }
  ::v-deep .el-dialog__header {
    background: #ffffff;
    border-bottom: 1px solid #f1f1f1;
  }
  ::v-deep .el-dialog .el-dialog__header .el-dialog__close {
    color: #000;
  }
  ::v-deep .el-dialog__body {
    overflow-x: auto;
  }
  ::v-deep .el-table__header th {
    background: rgba($color: #f8f8f8, $alpha: 1);
  }
</style>
